import global from "../global";
import MyComponent2 from "./my-component-2.vue";
import MyComponent5 from "./my-component-5.vue";
import MyComponent6 from "./my-component-6.vue";
import MyComponent7 from "./my-component-7.vue";

// 组件的选项对象
console.log(MyComponent2);

export default {
  install(Vue) {
    // 注册组件，传入一个扩展过的构造器
    Vue.component(
      "my-component-1",
      Vue.extend({
        render(createElement) {
          console.log(this);
          return createElement("p", this.text);
        },
        data() {
          return {
            text: "my-component-1",
          };
        },
      })
    );
    // 获取注册的组件 (始终返回构造器)
    console.log(Vue.component("my-component-1"));

    // 注册组件，传入一个选项对象 (自动调用 Vue.extend)
    Vue.component("my-component-2", MyComponent2);
    console.log(Vue.component("my-component-2"));

    Vue.component(
      "my-component-3",
      Vue.extend({
        render(createElement) {
          return createElement(
            "button",
            {
              on: {
                click() {
                  global.count++;
                },
              },
            },
            `count is: ${this.double}`
          );
        },
        computed: {
          double() {
            return global.count * 2;
          },
        },
      })
    );

    Vue.component(
      "my-component-4",
      Vue.extend({
        render(createElement) {
          return createElement(
            "button",
            {
              on: {
                click() {
                  global.count--;
                },
              },
            },
            `count is: ${global.count}`
          );
        },
      })
    );

    Vue.component("my-component-5", MyComponent5);

    Vue.component("my-component-6", MyComponent6);

    Vue.component("my-component-7", MyComponent7);
  },
};
